<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm" :inline="true" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="盘点员" class="mt-2">
            <el-select v-model="searchForm.categoryId">
              <el-option v-for="item in serviceTypeList" :key="item.id" :label="item.categoryName"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单据编号" class="mt-2">
            <el-input v-model="searchForm.projectName" placeholder="请输入盘点单编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="日期" class="mt-2">
            <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item class="mt-2">
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增-->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate">新增盘点单</el-button>
        <el-button type="primary" @click="handleCreate">下载模板</el-button>
        <el-button type="primary" @click="handleCreate">批量上传</el-button>
      </div>
      <div @click="getMenuList">
        <el-button circle>
          <template #icon><el-icon>
              <Refresh />
            </el-icon></template>
        </el-button>
      </div>
    </div>
    <el-table :table="tableData">
      <el-table-column prop="id" label="单据编号" width="180" />
      <el-table-column prop="name" label="盘点员" width="120" />
      <el-table-column prop="stock" label="盘点仓库" width="180" />
      <el-table-column prop="number" label="盈亏数量" width="100" />
      <el-table-column prop="date" label="盘点日期" width="180" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作" />
    </el-table>
    <form-dialog ref="formDrawerRef" width="98%" top="1vh" @submit="handleSubmitOrder">
      <div class="dialog-body">
        <el-form ref="formRef" :model="form">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label-width="100px">
                <template #label> <span class="text-red-600">*</span><span>盘点员</span> </template>
                <el-select v-model="form.inventory">
                  <el-option label="小明" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="盘点日期" label-width="100px">
                <el-date-picker v-model="form.arrivalDate" type="date" placeholder="请选择日期" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" label-width="100px">
                <el-input v-model="form.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider />
          <div class="flex justify-end">
            <el-button type="primary" @click="handleAddAccessory">添加配件</el-button>
          </div>
          <el-table :data="form.tableData" height="420">
            <el-table-column label="配件名称" align="center">
              <template #default="{ row }">
                <el-form-item class="test">
                  <el-input v-model="row.accessoryName"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="库存量" align="center">
              <template #default="{ row }">
                <el-form-item class="test">
                  <el-input v-model="row.accessoryName"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="实际数量" align="center">
              <template #default="{ row }">
                <el-form-item class="test">
                  <el-input v-model="row.accessoryName"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="亏盈数量" align="center">
              <template #default="{ row }">
                <el-form-item class="test">
                  <el-input v-model="row.accessoryName"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center">
              <template #default="{ row }">
                <el-form-item class="test">
                  <el-input v-model="row.accessoryName"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center">
              <template #default="{ row, $index }">
                <el-icon class="cursor-pointer" color="red" @click="handleDeleteAccessory(row, $index)">
                  <Delete />
                </el-icon>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </form-dialog>
  </el-card>
</template>
<script setup lang="ts">
import { useInitForm, useInitTable } from "@/hooks/useCommon";
import FormDialog from "@/components/FormDialog.vue";
import { getPartsUnitListApi } from "@/api/repair";
import { ref } from "vue";

const { searchForm, handleRestSearch, handleGetTableList } = useInitTable({
  searchForm: {
    categoryId: "",
    projectName: ""
  },
  getTableList: getPartsUnitListApi
});
const { formDrawerRef, formRef, form, handleCreate } = useInitForm({
  form: {
    inventory: "",
    tableData: [
      {
        accessoryName: "",
        accessoryNo: "",
        accessoryType: "",
        accessoryUnit: "",
        accessoryPosition: "",
        accessoryNumber: "",
        accessoryCost: "",
        accessoryPrice: ""
      }
    ]
  }
});

// 添加
const handleAddAccessory = () => {
  form.tableData.push({
    accessoryName: "",
    accessoryNo: "",
    accessoryType: "",
    accessoryUnit: "",
    accessoryPosition: "",
    accessoryNumber: "",
    accessoryCost: "",
    accessoryPrice: ""
  });
};

// 删除
const handleDeleteAccessory = (val: any, index: number) => {
  form.tableData.splice(index, 1);
};

const serviceTypeList = ref(new Array())
const value1 = ref(new Array())
const getMenuList = () => { }
const tableData = ref(void 0)
const handleSubmitOrder = () => { }
</script>
<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.dialog-body {
  height: calc(100vh - 200px);
  overflow-y: auto;
}

:deep(.cell) {
  padding: 0;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}
</style>
